<!-- Home.vue -->

<template>
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the Home Page!</p>
      <span>当前用户的id是：{{ id }}</span>
    </div>
    <div>
      <button @click="fetchData()">获取后端数据</button>
    </div>
    <span>{{ name }}</span>
  </template>
  
  <script>
  export default {
    name: 'HomePage',
    data() {
        return {
            id: null,
            name: '你好',
        }
    },
    methods: {
        fetchData(){
          this.$http.get('/test').then(response => {
            this.name = response.data;
          }).catch(error => {
            alert('请求失败', error);
          })
        }
    },
    created(){
         // 在 created 钩子中访问 $route 是安全的,要不然会导致页面找不到this.$route
        this.id = this.$route.query.id;
    }
  };
  </script>